<!DOCTYPE html>
<html>

<head>
    <title>arcgis map lineGradient</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <!-- <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"> -->
    <link rel="stylesheet" href="css/style.css">
    <style>
        #mapCanvas {
            padding: 0;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true,
            packages: [{
                name: 'extend',
                location: this.location.pathname.replace(/\/[^/]+$/, "") + "/plugins"
            }]
        };
    </script>
    <script type="text/javascript" src="../build/arcgis-map-lineGradient.js"></script>
    <script src="https://js.arcgis.com/3.23/"></script>
    <!-- <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> -->
</head>

<body>
    <div id="mapCanvas">
    </div>
    <div id='tooltips' style="position: absolute; visibility: hidden; background-color: rgba(0, 0, 0, 0.7); transition: top 0.2s ease 0s, left 0.2s ease 0s; border-radius: 2px; color: rgb(255, 255, 255); line-height: 16px; padding: 5px 10px; left: 137px; top: 337.333px;">2019-9-8<br>AQI
        : 102<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(197, 233, 0, 1);"></span>轻度污染</div>
    <script>
        var map, baseLayer, animateLayer, lineGradients;
        require(["esri/map",
                "esri/request",
                "dojo/parser",
                "dojo/number",
                "dojo/json",
                "esri/geometry/Point",
                "extend/RasterLayer",
                "dojo/domReady!"
            ],
            function (Map,
                esriRequest,
                parser,
                number,
                JSON,
                Point,
                RasterLayer
            ) {
                parser.parse();
                map = new Map("mapCanvas", {
                    center: [116.252, 31.557],
                    zoom: 6,
                    basemap: "gray"
                });

                map.on("load", mapLoaded);

                function mapLoaded() {
                    baseLayer = new RasterLayer(null, {
                        opacity: 1
                    });
                    animateLayer = new RasterLayer(null, {
                        opacity: 1
                    });
                    map.addLayers([baseLayer, animateLayer]);
                    map.on("extent-change", redraw);
                    map.on("resize", redraw);
                    map.on("zoom-start", redraw);
                    map.on("pan-start", redraw);

                    var request = esriRequest({
                        url: 'data/line-gradients.json',
                        content: {},
                        handleAs: "json"
                    })
                    request.then(function (result) {
                        var dataset = [];
                        if (result) {
                            for (var key in result) {
                                if (result.hasOwnProperty(key) && result[key] != undefined) {
                                    var line = {
                                        name: key,
                                        data: []
                                    };
                                    const element = result[key];
                                    line.label = element[0].z == 100 ? '地面' : '高空' + Number(element[0].z) +
                                        '米';
                                    line.labelColor = key == '1' ? '#d01118' : (key == '2' ? '#058c29' :
                                        '#0e46b1');
                                    element.forEach(function (item, idx) {
                                        line.data.push({
                                            code: item.code,
                                            name: idx + 1,
                                            height: item.z,
                                            lonlat: new Point({
                                                x: item.x,
                                                y: item.y,
                                                spatialReference: {
                                                    wkid: 4326
                                                }
                                            }),
                                            time: item.time,
                                            value: item.qy
                                        });
                                    });
                                    dataset.push(line);
                                }
                            }
                        }

                        lineGradients = new LineGradient(map, {
                            //线条宽度
                            lineWidth: 4,
                            //线条颜色
                            lineStyle: '#F9815C',
                            //数据源
                            data: dataset,
                            //canvas图层
                            baseCanvas: baseLayer._element,
                            animateCanvas: animateLayer._element,
                            //事件
                            methods: {
                                mousemove: function (e, obj) {
                                    console.log('你当前点击的是' + obj);
                                    var tooltips = document.getElementById('tooltips');
                                    var content = obj.time + '<br>序号：' + obj.code + '<br>经度 : ' +
                                        obj.lonlat.y + '<br>纬度 : ' + obj.lonlat.x +
                                        '<br>高度 : ' + obj.height +
                                        '<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                                        obj.color + ';"></span>' + obj.value;
                                    tooltips.innerHTML = content;
                                    tooltips.style.visibility = 'visible';
                                    tooltips.style.left = e.clientX + 'px';
                                    tooltips.style.top = e.clientY + 'px';
                                }
                            }
                        })

                        redraw();
                    }, function (err) {
                        console.log('Error: ', err.message);
                    });
                }

                function redraw() {
                    baseLayer._element.width = map.width;
                    baseLayer._element.height = map.height;
                    animateLayer._element.width = map.width;
                    animateLayer._element.height = map.height;
                    lineGradients.start();
                }
            });
    </script>
</body>

</html>